<template>
  <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="100px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="formModel.taskName" placeholder="请输入任务名称" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="任务编号" prop="taskCode">
          <el-input v-model="formModel.taskCode" placeholder="请输入任务编号" maxlength="20" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="起始地点" prop="startPos">
          <el-input-number v-model="formModel.startPos" :min="0" controls-position="right" style="width: 100%;" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="任务距离" prop="taskTrip">
          <el-input-number v-model="formModel.taskTrip" :min="0" controls-position="right" style="width: 100%;" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="创建人" prop="creator">
          <el-input v-model="formModel.creator" placeholder="请输入创建人" maxlength="10" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="执行人" prop="executor">
          <el-input v-model="formModel.executor" placeholder="请输入执行人" maxlength="10" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="备注" prop="remark">
      <el-input
          v-model="formModel.remark"
          type="textarea"
          :rows="3"
          placeholder="请输入备注"
          maxlength="250"
      />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElRow,
  ElCol,
} from 'element-plus';

const props = defineProps({
  // 用于接收父组件传递过来的、用于编辑的初始任务数据
  initialData: {
    type: Object,
    default: () => ({}),
  },
});

const formRef = ref(null);

// 表单数据模型
const formModel = reactive({
  id: null,
  taskName: '',
  taskCode: '',
  startPos: 0,
  taskTrip: 0,
  creator: '',
  executor: '',
  remark: '',
});

// 表单验证规则
const formRules = {
  taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
  taskCode: [{ required: true, message: '请输入任务编号', trigger: 'blur' }],
  startPos: [{ required: true, message: '请输入起始地点', trigger: 'blur' }],
  taskTrip: [{ required: true, message: '请输入任务距离', trigger: 'blur' }],
  creator: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
  executor: [{ required: true, message: '请输入执行人', trigger: 'blur' }],
};
const resetForm = () => {
  formModel.id = null;
  formModel.taskName = '';
  formModel.taskCode = '';
  formModel.startPos = 0;
  formModel.taskTrip = 0;
  formModel.creator = '';
  formModel.executor = '';
  formModel.remark = '';
  formRef.value?.clearValidate();
};

// 侦听initialData的变化，用于表单回显
watch(
    () => props.initialData,
    (newData) => {
      if (newData && newData.id) {
        Object.assign(formModel, newData);
      } else {
        // 如果是新增，则重置表单
        resetForm();
      }
    },
    { immediate: true, deep: true }
);

// 重置表单方法

// 暴露给父组件的方法
defineExpose({
  formRef,
  formModel,
  resetForm,
});
</script>